<template>
  <el-dialog title="到款明细" :visible.sync="centerDialogVisible" width="80%" center top="20px">
    <el-table v-loading="tableLoading" :data="listData" border size="mini">
      <el-table-column fixed="left" width="50" label="序号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否关联组别" width="120" align="center">
        <template slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.group_id !== null" type="success">已关联</el-tag>
          <el-tag size="mini" v-else type="danger">未关联</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="到款时间" min-width="120" prop="account_received_time" align="center"/>
      <el-table-column label="付款客户" min-width="120" prop="customer_name" align="center"/>
      <el-table-column label="到款金额" min-width="120" prop="account" align="center"/>
      <el-table-column label="组别销售单信息" min-width="120" prop="account" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.billSaleVOS &&scope.row.billSaleVOS.length">
            <div v-for="(item,index) in scope.row.billSaleVOS" :key="index">
              {{ item.contract_num + '——' + item.actual_execute_time_start + '~' + item.actual_execute_time_end }}
            </div>
          </div>
          <div v-else>
            暂无信息
          </div>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { queryListByIds } from '@/api/accountReceived'

export default {
  name: 'ReceivedDialog',
  props: {
    ids: {
      type: Array,
      default() {
        return [-1]
      }
    }
  },
  data() {
    return {
      tableLoading: false,
      listData: [],
      centerDialogVisible: false
    }
  },
  methods: {
    open() {
      this.getList(this.ids)
      this.centerDialogVisible = true
    },
    getList(ids) {
      this.tableLoading = true
      queryListByIds(ids).then(res => {
        this.tableLoading = false
        this.listData = res.data
      }).catch(() => {
        this.tableLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
